<template>
  <div class="xq-form-wrapper">
    <!-------------------------------------------- 删除添加按钮区域start -------------------------------------------->
    <div class="xq-form-action">
      <a-space class="xq-form-action-left">
        <a-button type="primary" @click="showCreateModal">添加配置</a-button>
      </a-space>
    </div>
    <!-------------------------------------------- 删除添加按钮区域end -------------------------------------------->

    <!-------------------------------------------- 表格区域区域start -------------------------------------------->
    <a-spin :spinning="spinning" class="xq-form-content">
      <XqTable
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :customize="FormJson['config']['table']['customize']"
        :dataSource="tableData"
        :columns="columns"
        :rowSelection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
      >
        <!--------------------------------------------主要内容，表格，自定义 header -------------------------------------------->
        <template v-for="(col, index) in columns" #[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-------------------------------------------- 主要内容，表格，自定义 td -------------------------------------------->
        <template v-for="(col, index) in columns" #[col.dataIndex]="text, record">
          <!-------------------------------------------- 主操作列区域start -------------------------------------------->
          <span v-if="col.dataIndex === 'tableAction'" :key="index">
            <a-popconfirm v-if="record.enable" :title="`确认要禁用吗？`" okText="确认" cancelText="取消" @confirm="disableContract(record)">
              <a>禁用</a>
            </a-popconfirm>
            <a-popconfirm v-else :title="`确认要启用吗？`" okText="确认" cancelText="取消" @confirm="openContract(record)">
              <a>启用</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="showRechargeModal(record)">充值</a>
            <a-divider type="vertical" />
            <a @click="showRechargeListModal(record)">充值记录</a>
            <a-divider type="vertical" />
            <a-popconfirm :title="`确认要删除吗？`" okText="确认" cancelText="取消" @confirm="deleteConfig(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <!-------------------------------------------- 主操作列区域end -------------------------------------------->
          <!-------------------------------------------- 枚举值转换start -------------------------------------------->
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          <!-------------------------------------------- 枚举值转换end -------------------------------------------->
        </template>
      </XqTable>
      <!-------------------------------------------- 分页区域start -------------------------------------------->
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="currentPage"
          :pageSize="pageSize"
          :total="total"
          :showSizeChanger="true"
          :showQuickJumper="true"
          :pageSizeOptions="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
      <!-------------------------------------------- 分页区域区域end -------------------------------------------->
    </a-spin>
    <!-------------------------------------------- 表格区域end -------------------------------------------->

    <!-------------------------------------------- 添加弹窗区域start -------------------------------------------->
    <a-modal v-model="createModalVisible" :maskClosable="false" :destroyOnClose="true" title="添加配置" :width="500">
      <XqFormBuild
        ref="createForm"
        :dataSource="{}"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['create']"
      />
      <XqModalFooter slot="footer" @cancel="createCancel" @ok="createOk" />
    </a-modal>
    <!-------------------------------------------- 添加弹窗区域end -------------------------------------------->

    <a-modal
      v-model="rechargeModalVisible"
      :maskClosable="false"
      :destroyOnClose="true"
      title="充值"
      :width="500"
      @cancel="rechargeModalCancel"
      @ok="rechargeModalOk"
    >
      <div style="display: flex; align-items: center; margin-right: 24px; margin-left: 24px">
        <span style="width: 100px; text-align: right">充值额度: </span>
        <a-input-number style="margin-left: 5px" :min="0" :step="1" v-model="quota" />
      </div>
    </a-modal>
    <a-modal
      v-model="rechargeListModalVisible"
      :maskClosable="false"
      :destroyOnClose="true"
      title="充值记录"
      :width="800"
      :footer="null"
      @cancel="rechargeListModalCancel"
    >
      <rechargeList :siteId="siteId" />
    </a-modal>
  </div>
</template>
<script>
import FormJson from "./FormJson"; // 引入FormJson数据
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { retrieveReq, createReq, deleteReq, deleteBatchReq, updateReq, recharge, openContract, disableContract } from "./api"; // 引入接口文件

import rechargeList from "./components";

const curdMixin = new XqCurdMixin({
  createReq,
  retrieveReq,
  updateReq,
  deleteReq,
  deleteBatchReq,
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: { rechargeList },
  mixins: [curdMixin],
  data() {
    return {
      pageSize: 20,
      rechargeModalVisible: false,
      rechargeListModalVisible: false,
      record: undefined,
      quota: undefined,
      siteId: undefined
    };
  },
  computed: {
    retrieveParams() {
      return {
        request: {}
      };
    },
    createParams() {
      return {};
    },
    updateParams() {
      return {};
    }
  },

  methods: {
    formatValues(values) {
      return values;
    },
    formatDataSource(record) {
      return record;
    },
    deleteConfig(data) {
      deleteReq(data.siteId, data.id)
        .then((res) => {
          this.$message.success("删除成功!");
          this.retrieveRecord();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.$message.error("删除失败!");
        });
    },
    // 开启租户合同
    openContract(data) {
      openContract(data.siteId, data.id)
        .then((res) => {
          this.$message.success("已启用");
          this.retrieveRecord();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 关闭租户合同
    disableContract(data) {
      disableContract(data.siteId, data.id)
        .then((res) => {
          this.$message.success("已禁用");
          this.retrieveRecord();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 充值接口
    recharge(data, quota) {
      recharge(data.siteId, data.id, quota)
        .then((res) => {
          this.$message.success("充值成功");
          this.retrieveRecord();
          this.quota = undefined;
          this.rechargeModalVisible = false;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    showRechargeModal(data) {
      this.record = data;
      this.rechargeModalVisible = true;
    },
    showRechargeListModal(data) {
      this.siteId = data.siteId;
      this.rechargeListModalVisible = true;
    },
    rechargeModalCancel() {
      this.rechargeModalVisible = false;
    },
    rechargeListModalCancel() {
      this.rechargeListModalVisible = false;
    },
    rechargeModalOk() {
      this.recharge(this.record, this.quota);
    }
  }
};
</script>
